<script lang="ts" setup>
import { computed, reactive } from 'vue';
import { usePopupStore } from '@/store/popup';
import { storeToRefs } from 'pinia';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupStore = usePopupStore();
const { guestNumberPickerRef } = storeToRefs(popupStore);

const numbers = reactive({
  adults: 0,
  children: 0,
  babys: 0
});

const props = withDefaults(
  defineProps<{
    maxBookersNumber: number;
    adultsNumber: number;
    childrenNumber: number;
    babysNumber: number;
  }>(),
  {
    maxBookersNumber: 9999,
    adultsNumber: 0,
    childrenNumber: 0,
    babysNumber: 0
  }
);

const total = computed(() => {
  return numbers.adults + numbers.children + numbers.babys;
});

const remaining = computed(() => {
  if (total.value === 0) {
    return {
      adults: props.maxBookersNumber,
      children: props.maxBookersNumber,
      babys: props.maxBookersNumber
    };
  }
  if (total.value === props.maxBookersNumber) {
    return {
      adults: 0,
      children: 0,
      babys: 0
    };
  }
  const n = props.maxBookersNumber - total.value;
  return {
    adults: numbers.adults + n,
    children: numbers.children + n,
    babys: numbers.babys + n
  };
});

popupStore.onOpened('GUEST_NUMBER', () => {
  numbers.adults = props.adultsNumber;
  numbers.children = props.childrenNumber;
  numbers.babys = props.babysNumber;
});

const emit = defineEmits<{
  update: [v1: number, v2: number, v3: number];
}>();

function handleConfirm() {
  if (total.value > props.maxBookersNumber) {
    return uni.showToast({
      title: t('roomDetailIncomeNumber', { occupancy: props.maxBookersNumber }),
      icon: 'none'
    });
  }
  popupStore.closeGuestNumberPicker();
  emit('update', numbers.adults, numbers.children, numbers.babys);
}
</script>

<template>
  <apt-popup
    ref="guestNumberPickerRef"
    :title="t('LHKey_selectRoomAndGuest')"
    @close="popupStore.closeGuestNumberPicker"
    @confirm="handleConfirm"
  >
    <view class="apt-guest-number-picker__item">
      <text>{{ t('LHKey_selectRoomAdult') }}</text>
      <apt-counter v-model="numbers.adults" :max="remaining.adults" :min="1" />
    </view>
    <view class="apt-guest-number-picker__item">
      <view class="flex items-center">
        <text class="text-base text-primary">{{ t('LHKey_selectRoomChildren') }}</text>
        <text class="ml-1 text-xxs text-fourth">{{ t('LHKey_selectAge212') }}</text>
      </view>
      <apt-counter v-model="numbers.children" :max="remaining.children" />
    </view>
    <view class="apt-guest-number-picker__item">
      <view class="flex items-center">
        <text class="text-base text-primary">{{ t('LHKey_selectRoomInfants') }}</text>
        <text class="ml-1 text-xxs text-fourth">{{ t('LHKey_selectUnder2years') }}</text>
      </view>
      <apt-counter v-model="numbers.babys" :max="remaining.babys" />
    </view>
  </apt-popup>
</template>

<style lang="scss">
.apt-guest-number-picker__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  padding: 0 16rpx;

  & + & {
    border-top: 1rpx solid #f4f4f4;
  }
}
</style>
